import { App } from "vue";
import Skeleton from "./Skeleton/Skeleton.vue";
import Carousel from './Carousel/Carousel.vue'
import More from "./More/More.vue";
import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from '@/assets/images/200.png'
import Bread from "./Bread/Bread.vue";
import BreadItem from "./Bread/BreadItem.vue";
import Numbox from "./Numbox/Numbox.vue";
import Button from "./Button/Button.vue";
import City from "./City/City.vue";
import Checkbox from "./Checkbox/Checkbox.vue";

export default {
  install(app: App) {
    // 帮我们自动注册所有的全局组件
    app.component(Skeleton.name, Skeleton)
    app.component(Carousel.name, Carousel)
    app.component(More.name, More)
    app.component(Bread.name, Bread)
    app.component(BreadItem.name, BreadItem)
    app.component(Numbox.name, Numbox)
    app.component(Button.name, Button)
    app.component(City.name, City)
    app.component(Checkbox.name, Checkbox)

    // 项目比较小, 所以不需要单独写一个 directives/index.ts
    // 注册全局指令
    // v-lazy: 实现图片懒加载
    // Vue2: Vue.directive(指令名, { inserted(el) {} })
    // Vue3: 钩子更新了, inserted => mounted
    app.directive('lazy', {
      mounted(el, { value }) {
        // 做懒加载需要什么?
        // 1. 元素对象
        // 2. 图片地址
        // 3. vueuse => useIntersectionObserver
        // console.log('我被挂载了', el, value)
        // el.src = value
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // console.log('当前状态:', isIntersecting)
          // isIntersecting 获取是否在可视区
          if (isIntersecting) {
            el.src = value
            stop() // 当加载完成后, 就不需要再触发了
            // 图片加载失败时会触发
            el.onerror = () => {
              // console.log('图裂了')
              // 设置默认图片
              // 常见的图片处理方案:
              // 1. 导入本地图片来使用
              // 2. 使用 base64 或 URL
              el.src = defaultImg
            }
          }
        })
      }
    })
    // 图片懒加载 - 思路总结
    // 为什么要使用图片懒加载?
    // 网页中图片使用量较大, 而用户不可能一屏看完所有的图片, 为了提高首次打开网页时的加载速度, 只需要加载用户看到的部分图片即可, 以达到提升渲染性能的目的.
    // 要用到什么技术?
    // 1. 自定义指令
    // 2. @vueuse/core => useIntersectionObserver (获取元素是否在可视区)
    // 实现思路是什么?
    // 1. 全局注册自定义指令
    //    a. 钩子更名了「Vue2: inserted  Vue3: mounted」
    //    b. mounted 参数1: el 原生 DOM 对象, 参数2: binding 内部可以获取到指令后面的值 v-lazy="值"
    // 2. 在 mounted 钩子中获取到图片对象和它对应的图片地址
    // 3. 使用 useIntersectionObserver 来监视图片是否出现在可视区
    //    a. 出现在可视区, 就立即设置 img 的 src 属性
    //    b. 当出现在可视区后, 调用 stop 方法停止再次出发出现在可视区的回调
    // 4. 给 img 绑定 onerror 事件, 处理图片加载失败时的默认图片显示
  }
}